.lotABCD-content{
    position: absolute;top: 44px; height: 44px; display: flex; align-items: center;  z-index: 10001; width: 100%; background: #fff;
    ion-col{
        font-size: 17px;
    }
}
.ion-content{
    background: #fff;
}
.menu-btn{
    ion-button{
        color: #fff; font-size: 15px;
    }
}
.lotdetail-res-contain{
    position: fixed; width: 100%;  z-index: 1000; background: transparent; margin-top: 0px;
}
.lot-tabbar{
    width: 100%; overflow: hidden; height: auto; 
    ul{
        padding: 0px; margin: 0px;  
    }
    li{
        width: 120px; float: left;display: inline-block; height: 50px; line-height: 50px; text-align: center; background: #efefef;
        &.active{
            background: #fff;
        }
    }
}
.lot-mix-tabbar{
    ul{
        padding: 4px 0px 0px; margin: 0px;  
    }
    li{
        width: 33%; float: left; list-style: none; height: 34px; padding: 2px; line-height: 28px;
        span{
            display: block; background: #efefef;  font-size: 14px;
        }
        &.active span{
            background: #fff; border: 1px solid #ff6565;
        }
    }
    .f3d_special{
        width: 100%; text-align: left; border-bottom: 1px solid #E8E9EC ; padding-left: 18px;
    }
}

.lot-menu-left{
    .lot-menu-button-contain{
        position: fixed; bottom: 55px; width: calc(calc(4 / var(--ion-grid-columns, 12)) * 100%);
        span{
            display: inline-block; width: 100%; height: 40px; line-height: 40px; text-align: center; background: #ff6565; color: #fff; font-size: 17px;
            &:first-child{
                border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: 1px solid #fff;
            }
            &:last-child{
                border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
            }
        }
    }
}
.lot-data-right{
    .lot-rate-contain{
        clear: both;
        .fold-div{
            font-weight: 900; color:#ec4711; height: 50px; line-height: 60px; text-align: center; font-size: 17px;
            &.fold-div-bottom{
                border-bottom: 1px solid #E8E9EC;
            }
        }
    }
    .lot-select-col.lot-select-col-active{
        background: #ff6565;
        .lot-span-num,.sigle-world-num,.other-num-arr,.show-name,.show-name-num{
            color: #fff !important;
        }
        .num-circlenum{
            .other-num-arr{
                box-shadow: 0px 0px 3px #fff !important;
            }
        }
        .num-word{
            .other-num-err{
                color: #fff !important;
            }
        }
    }
    .lot-select-col.lot-select-zmlm-col-active{
        border: 1px solid #ff6565 !important;
    }
    .lot-select-col{
        .lot-select-col{ display: none;}
        .zmlm-span{
            font-size: 15px;
            span{
                color: #ff4a4a;
            }
        }
        .fast-lot-div{
            width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;
            ion-label{
                display: inline-block;
            }
            &.fast-lot-div-ssc-d{ 
                display: flex; align-items: center !important; justify-content: center; height: auto;
            }
        }
        
    }

    .ts-lotrate{
        position: fixed; height: 30px; background: #efefef; font-size: 14px; width: calc(calc(9 / var(--ion-grid-columns, 12)) * 100%); max-width: calc(calc(9 / var(--ion-grid-columns, 12)) * 100%); 
        z-index: 999; line-height: 30px; margin-top: -6px; border-left: 2px solid #fff;
        div{
            position: relative; 
            span{
                float: right; padding-right: 10px;
            }
        }
    }
    .ts-zx{
        padding-top: 32px;
    }
    // 特殊冠亚和
    .ts-gyh{
        margin-right: 4px;
        ion-col{
            border: none; margin-bottom: 4px;
            &:first-child,&:nth-child(2){
                border: none;
            }
            &.lot-select-col{
                &.lot-select-col-active{
                    background: #fff;
                    .ts-gyh-div{
                        background: #ff6565;
                    }
                }
            }
            .ts-gyh-div{
                display: block; width: 100%; margin-left: 4px; border: 1px solid #E8E9EC; border-radius: 4px; height: 100%; position: relative;
                p{
                    margin: 0px;  text-align: center;
                    &.showname{
                        height: 30px; line-height: 30px;
                    }
                    &.lot-span-num{
                        height: 20px; line-height:9px;
                    }
                    &.lot-span-num{
                        padding: 0px;
                    }
                }
                .lot-span-num{
                     font-size: 12px;
                }
            }
        }
    }
}

    .res-item{
        p{
            margin: 0px;
            &.res-data-num{
               color: #858585;font-size: 12px;text-align: center; margin-bottom: 8px;
            }
            &.res-item-num{
                text-align: center;
                span{
                     display: inline-block;height: 22px; line-height: 22px; text-align: center;  color: #fff; margin-right: 2px; width: 22px; border-radius: 2px; font-size: 15px;
                     &.pk-num-font{
                        font-family: 'impact'; -webkit-text-stroke: 1px #333; text-stroke: 1px #333;
                     }
                }
            }
            &.res-item-w{
                span{
                    margin-right: 4px; font-size: 12px; color: #858585; border: 1px solid #858585; width: 20px; height: 20px; border-radius: 2px; padding: 0px 2px;
                }
            }
        }
        &.lot-first-item{
            height: 90px; border-bottom: 1px solid #E8E9EC;  padding-bottom: 2px;
        }
       .res-data-time{
           p{
               font-size: 12px; color: #858585; text-align: center;
           }
       } 
       .res-data-time-one{
           width: 90px; margin-top: -2px; height: 90px;  border-left: 1px solid #E8E9EC; padding-top: 20px;
       }
       .res-data-time-other{
           width: 90px;
       }
    }
    .res-contain{
         overflow: hidden;margin-bottom: 0px; 
         ion-item{
            --padding-start:0px;--padding-end:0px;--inner-padding-end:0px;--inner-padding-start:0px;
         }
    }
    // 极速六合彩，六合彩
    .lhc-qlc{
        .res-item-num{
            span.lhc-qlc-lot{
                height: 22px; width: 22px; color: #fff; line-height: 22px; border-radius: 22px;
            }
            span.lhc-qlc-lot-add{
                color: initial;
            }
        }
        .res-item-w{
            i{
                font-style: normal;
            }
            span{
                height: 22px; width: 22px;  line-height: 22px; border: none !important; display: inline-block; margin-right: 4px !important;
            }
        }
        .lhc-qlc-lot-1,.lhc-qlc-lot-2,.lhc-qlc-lot-7,.lhc-qlc-lot-8,.lhc-qlc-lot-01,.lhc-qlc-lot-02,.lhc-qlc-lot-07,.lhc-qlc-lot-08,.lhc-qlc-lot-12,.lhc-qlc-lot-13,.lhc-qlc-lot-18,.lhc-qlc-lot-19,.lhc-qlc-lot-23,.lhc-qlc-lot-24,.lhc-qlc-lot-29,.lhc-qlc-lot-30,.lhc-qlc-lot-34,.lhc-qlc-lot-35,.lhc-qlc-lot-40,.lhc-qlc-lot-45,.lhc-qlc-lot-46{
            background: #ff4040 !important;
        }
        .lhc-qlc-lot-3,.lhc-qlc-lot-4,.lhc-qlc-lot-9,.lhc-qlc-lot-03,.lhc-qlc-lot-04,.lhc-qlc-lot-09,.lhc-qlc-lot-10,.lhc-qlc-lot-14,.lhc-qlc-lot-15,.lhc-qlc-lot-20,.lhc-qlc-lot-25,.lhc-qlc-lot-26,.lhc-qlc-lot-31,.lhc-qlc-lot-36,.lhc-qlc-lot-37,.lhc-qlc-lot-41,.lhc-qlc-lot-42,.lhc-qlc-lot-47,.lhc-qlc-lot-48{
            background: #0a92e0 !important;
        }
        .lhc-qlc-lot-5,.lhc-qlc-lot-6,.lhc-qlc-lot-05,.lhc-qlc-lot-06,.lhc-qlc-lot-11,.lhc-qlc-lot-16,.lhc-qlc-lot-17,.lhc-qlc-lot-21,.lhc-qlc-lot-22,.lhc-qlc-lot-27,.lhc-qlc-lot-28,.lhc-qlc-lot-32,.lhc-qlc-lot-33,.lhc-qlc-lot-38,.lhc-qlc-lot-39,.lhc-qlc-lot-43,.lhc-qlc-lot-44,.lhc-qlc-lot-49{
            background: #49ac08 !important;
        }
    }
    // 新疆时时彩，天津时时彩，极速时时彩，澳洲幸运5
    .ssn-ssh-ss8{
        span.ssn-ssh-ss8-num{
            height: 22px !important; width: 22px !important; line-height: 22px !important; background: url('../../../../assets/img/lot_res_bg.png') no-repeat; background-size: contain;
        }
    }
    // 重庆快乐生效
    .ssc-ssc{
        span.ssc-ssc-num{
            height: 22px !important; width: 22px !important; line-height: 22px !important;
        }
        span.ssc-ssc--00,span.ssc-ssc--0{
            background: url('../../../../assets/img/sx_0.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--01,span.ssc-ssc--1{
            background: url('../../../../assets/img/sx_1.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--02,span.ssc-ssc--2{
            background: url('../../../../assets/img/sx_2.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--03,span.ssc-ssc--3{
            background: url('../../../../assets/img/sx_3.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--04,span.ssc-ssc--4{
            background: url('../../../../assets/img/sx_4.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--05,span.ssc-ssc--5{
            background: url('../../../../assets/img/sx_5.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--06,span.ssc-ssc--6{
            background: url('../../../../assets/img/sx_6.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--07,span.ssc-ssc--7{
            background: url('../../../../assets/img/sx_7.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--08,span.ssc-ssc--8{
            background: url('../../../../assets/img/sx_8.png') no-repeat; background-size: contain; 
        }
        span.ssc-ssc--09,span.ssc-ssc--9{
            background: url('../../../../assets/img/sx_9.png') no-repeat; background-size: contain; 
        }
    }
    // 江苏快三
    .s3s-s3s{
        span.s3s-s3s-num{
            height: 19px !important; width: 19px !important; line-height: 19px !important; padding-left: 1000;
        }
        span.s3s-s3s--01,span.s3s-s3s--1{
            background: url('../../../../assets/img/sai01.png') no-repeat; background-size: contain; 
        }
        span.s3s-s3s--02,span.s3s-s3s--2{
            background: url('../../../../assets/img/sai02.png') no-repeat; background-size: contain; 
        }
        span.s3s-s3s--03,span.s3s-s3s--3{
            background: url('../../../../assets/img/sai03.png') no-repeat; background-size: contain; 
        }
        span.s3s-s3s--04,span.s3s-s3s--4{
            background: url('../../../../assets/img/sai04.png') no-repeat; background-size: contain; 
        }
        span.s3s-s3s--05,span.s3s-s3s--5{
            background: url('../../../../assets/img/sai05.png') no-repeat; background-size: contain; 
        }
        span.s3s-s3s--06,span.s3s-s3s--6{
            background: url('../../../../assets/img/sai06.png') no-repeat; background-size: contain; 
        }
    }
    // 广西快乐十分
    .sgx_sgx{
        .sgx_sgx-num{
            width: 22px !important; height: 22px !important; line-height: 22px !important; display: inline-block !important; border-radius: 22px !important; color: #fff !important;
         }
        .sgx_sgx--01,.sgx_sgx--04,.sgx_sgx--07,.sgx_sgx--1,.sgx_sgx--4,.sgx_sgx--7,.sgx_sgx--10,.sgx_sgx--13,.sgx_sgx--16,.sgx_sgx--19 {
            background: #ff4040 !important;
        }
        .sgx_sgx--02,.sgx_sgx--05,.sgx_sgx--08,.sgx_sgx--2,.sgx_sgx--5,.sgx_sgx--8,.sgx_sgx--11,.sgx_sgx--14,.sgx_sgx--17,.sgx_sgx--20 {
            background:#0a92e0 !important;
        }
        .sgx_sgx--03,.sgx_sgx--06,.sgx_sgx--09,.sgx_sgx--3,.sgx_sgx--6,.sgx_sgx--9,.sgx_sgx--12,.sgx_sgx--15,.sgx_sgx--18,.sgx_sgx--21 {
            background: #49ac08 !important;
        }
    }
    // 天津快乐十分，广东快乐十分
    .stj_ssg{
        .stj_ssg-num{
            width: 21px !important; height: 21px !important; line-height: 21px !important; display: inline-block !important; border-radius: 22px !important; color: #fff;
         }
        .stj_ssg--01,.stj_ssg--02,.stj_ssg--03,.stj_ssg--04,.stj_ssg--05,.stj_ssg--06,.stj_ssg--07,.stj_ssg--08,.stj_ssg--09,.stj_ssg--1,.stj_ssg--2,
            .stj_ssg--3,.stj_ssg--4,.stj_ssg--5,.stj_ssg--6,.stj_ssg--7,.stj_ssg--8,.stj_ssg--9,.stj_ssg--10,.stj_ssg--11,.stj_ssg--12,.stj_ssg--13,.stj_ssg--14,
            .stj_ssg--15,.stj_ssg--16,.stj_ssg--17,.stj_ssg--18{
                background-image: linear-gradient(to bottom,#ffffff, #eaeaea); color: #003333 !important;border: 1px solid #c1c3ce;
            }
            .stj_ssg--19,.stj_ssg--20{
                background: #ff6161 !important; border:1px solid #ff6161;
            }
    }
    //广东11选5
    .sxg{
        .lot-sxg{
            color: #fff; background: url('../../../../assets/img/lot_res_bg.png') no-repeat; background-size: contain;
        }
    }
    //极速快乐8 澳洲幸运20
    .js8-a20{
        .res-data-num{
            margin-bottom: 0px !important;
        }
        .res-item-num{
            line-height: 20px;
        }
        .lot-js8-a20{
            font-size: 12px !important; border-radius: 100% !important; background: linear-gradient( 122deg, #e8e8e8 2%, #fefefe 77%, #fefefe 100%);border: 1px solid #c1c3ce;color: #1051e5 !important;
            &.js8-a20--1,&.js8-a20--2,&.js8-a20--3,&.js8-a20--4,&.js8-a20--5,&.js8-a20--6,&.js8-a20--7,&.js8-a20--8,&.js8-a20--9,&.js8-a20--10,&.js8-a20--11,&.js8-a20--12,
            &.js8-a20--13,&.js8-a20--14,&.js8-a20--15,&.js8-a20--16,&.js8-a20--17,&.js8-a20--18,&.js8-a20--19,&.js8-a20--20,&.js8-a20--21,&.js8-a20--22,&.js8-a20--23,&.js8-a20--24,&.js8-a20--25,
            &.js8-a20--26,&.js8-a20--27,&.js8-a20--28,&.js8-a20--29,&.js8-a20--30,&.js8-a20--31,&.js8-a20--32,&.js8-a20--33,&.js8-a20--34,&.js8-a20--35,&.js8-a20--36,&.js8-a20--37,&.js8-a20--38,&.js8-a20--39,&.js8-a20--40{
                color: #546168 !important;
            }
        }
    }

.res-btn-div{
    text-align: center; position: relative; overflow: hidden;  height: 40px; z-index: 4; border-bottom: 1px solid #E8E9EC;
    ion-button{
       position: absolute; top: -12px; left: 50%; margin-left: -30px;
    }
    .res-fun-change{
        height: 40px; background: #efefef;  display: flex; justify-content: center; align-items: center;
        div.res-fun-change-f{
            width: 40%; display: flex; justify-content: center; align-items: center;
        }
        div.res-fun-change-v{
            width: 20%; display: flex; justify-content: center; align-items: center;
        }
        ion-icon{
            color: #ff5353;
        }
        span{
            font-size: 14px;  color: #ff5353;
        }
    }
}
ion-grid ion-row{
    text-align: center;
}
.lot-paly-padding{
    padding: 130px 0px 0px 0px;
   // margin-top: 100px;
}
.lot-left-menu-row{
    .select-title{
            height: 30px; line-height: 30px; margin-top: 9px; border-left: 4px solid #efefef; font-size: 15px;
    }
     & .active{
        background: #fff; 
           .select-title{
                border-left: 4px solid #ff6565;
            }
        }
    } 
.grid-left-col{
    ion-grid{
        padding: 0px; margin-bottom: 8px;background:#efefef;
        ion-col{
            border-bottom: 1px solid #E8E9EC; height: 50px;  line-height: 50px; padding: 0px;
        }
    }
}
.grid-right-col{
    border-left: 1px solid #E8E9EC;
    border-bottom: 1px solid #E8E9EC;
    margin-top: 2px;
    ion-grid{
         padding: 0;
        ion-col{
            border-right: 1px solid #e8e9ec;
            border-bottom: 1px solid #E8E9EC;
            height: 50px; line-height: 50px; padding: 0px;
            .showname{
                color: #2d2d2d; font-size: 17px;
                .pk-num-icon{
                    font-size: 18px;
                }
            }
        }
        ion-col:first-child,ion-col:nth-child(2){
            border-top: 1px solid #E8E9EC;
        }
        ion-col:nth-child(even){
            border-right:none;
        }
        ion-col{
            display: flex; align-items: center; justify-content: center;
        }
    }
    .lot-span-num{
        padding-left: 5px; color: #ff4a4a; font-size: 12px;
    }
    .showname-sjs-bg{
        &.showname-sjs-num{
            color: #fff !important; display: inline-block;  width: 30px; height: 30px; line-height: 30px;
        }
    }
}


.grid-right-col {
    ion-grid{
        .showname{
            &.circlenum-num{
                background: #f5f5f5; width: 30px; line-height: 30px; display: inline-block; border-radius: 30px;-moz-box-shadow:0px 0px 3px #333333; -webkit-box-shadow:0px 0px 3px #333333; box-shadow:0px 0px 3px #333333;
            }
            &.circlenum-1,&.circlenum-2,&.circlenum-7,&.circlenum-8,&.circlenum-01,&.circlenum-02,&.circlenum-07,&.circlenum-08,&.circlenum-12,&.circlenum-13,&.circlenum-18,&.circlenum-19,&.circlenum-23,&.circlenum-24,&.circlenum-29,&.circlenum-30,&.circlenum-34,&.circlenum-35,&.circlenum-40,&.circlenum-45,&.circlenum-46{
                color: #ff4040 !important;
            }
            &.circlenum-3,&.circlenum-4,&.circlenum-9,&.circlenum-03,&.circlenum-04,&.circlenum-09,&.circlenum-10,&.circlenum-14,&.circlenum-15,&.circlenum-20,&.circlenum-25,&.circlenum-26,&.circlenum-31,&.circlenum-36,&.circlenum-37,&.circlenum-41,&.circlenum-42,&.circlenum-47,&.circlenum-48{
                color: #0a92e0 !important;
            }
            &.circlenum-5,&.circlenum-6,&.circlenum-05,&.circlenum-06,&.circlenum-11,&.circlenum-16,&.circlenum-17,&.circlenum-21,&.circlenum-22,&.circlenum-27,&.circlenum-28,&.circlenum-32,&.circlenum-33,&.circlenum-38,&.circlenum-39,&.circlenum-43,&.circlenum-44,&.circlenum-49{
                color: #49ac08 !important;
            }
            &.circlenum-num-one{
                width: 30px; line-height: 30px; display: inline-block; border-radius: 30px; color: #fff !important;
             }
            &.circlenum-one-01,&.circlenum-one-04,&.circlenum-one-07,&.circlenum-one-1,&.circlenum-one-4,&.circlenum-one-7,&.circlenum-one-10,&.circlenum-one-13,&.circlenum-one-16,&.circlenum-one-19 {
                color: #ff4040 !important;
            }
            &.circlenum-one-02,&.circlenum-one-05,&.circlenum-one-08,&.circlenum-one-2,&.circlenum-one-5,&.circlenum-one-8,&.circlenum-one-11,&.circlenum-one-14,&.circlenum-one-17,&.circlenum-one-20 {
                color: #0a92e0 !important;
            }
            &.circlenum-one-03,&.circlenum-one-06,&.circlenum-one-09,&.circlenum-one-3,&.circlenum-one-6,&.circlenum-one-9,&.circlenum-one-12,&.circlenum-one-15,&.circlenum-one-18,&.circlenum-one-21 {
                color: #49ac08 !important;
            }
            
            &.circlenum-two-01,&.circlenum-two-02,&.circlenum-two-03,&.circlenum-two-04,&.circlenum-two-05,&.circlenum-two-06,&.circlenum-two-07,&.circlenum-two-08,&.circlenum-two-09,&.circlenum-two-1,&.circlenum-two-2,
            &.circlenum-two-3,&.circlenum-two-4,&.circlenum-two-5,&.circlenum-two-6,&.circlenum-two-7,&.circlenum-two-8,&.circlenum-two-9,&.circlenum-two-10,&.circlenum-two-11,&.circlenum-two-12,&.circlenum-two-13,&.circlenum-two-14,
            &.circlenum-two-15,&.circlenum-two-16,&.circlenum-two-17,&.circlenum-two-18{
                background-image: linear-gradient(to bottom,#ffffff, #eaeaea); color: #003333 !important; width: 29px !important; height: 29px !important; border: 1px solid #c1c3ce; line-height: 29px;
            }
            &.circlenum-two-19,&.circlenum-two-20{
                background: #ff6161 !important; 
            }
            &.showname-ssc-num{
                height: 30px; width: 30px;
            }
            &.showname-ssc-00,&.showname-ssc-0{
                background: url('../../../../assets/img/sx_0.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-01,&.showname-ssc-1{
                background: url('../../../../assets/img/sx_1.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-02,&.showname-ssc-2{
                background: url('../../../../assets/img/sx_2.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-03,&.showname-ssc-3{
                background: url('../../../../assets/img/sx_3.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-04,&.showname-ssc-4{
                background: url('../../../../assets/img/sx_4.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-05,&.showname-ssc-5{
                background: url('../../../../assets/img/sx_5.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-06,&.showname-ssc-6{
                background: url('../../../../assets/img/sx_6.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-07,&.showname-ssc-7{
                background: url('../../../../assets/img/sx_7.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-08,&.showname-ssc-8{
                background: url('../../../../assets/img/sx_8.png') no-repeat; background-size: contain; 
            }
            &.showname-ssc-09,&.showname-ssc-9{
                background: url('../../../../assets/img/sx_9.png') no-repeat; background-size: contain; 
            }

            &.showname-lot-num{
                width: 22px; height: 22px; color: #fff !important; line-height: 22px; border-radius: 2px; font-family: 'impact'; -webkit-text-stroke:1px #333; 	text-stroke:1px #333;
            }
    
        }
        .lot-span-num{
    
        }
    }
    ion-grid.wordcirclenum,ion-grid.wordnum{
        .worder-mix{
            margin: 0px 8px 8px; border: 1px solid #E8E9EC;  display: flex; justify-content: center; align-items: center; width: 100%; position: relative;
            .type-left{
                width: 80px; position: relative; line-height: 20px;
                span{
                    font-size: 8px;
                    &:first-child{
                        margin-right: 4px;
                    }
                }
                .show-name{
                    color: #ff6565; font-size: 17px !important;
                }
                .show-name-num{
                    color: #858585;
                }
            }
            .type-right{
                width: calc(100% - 80px); border-left: 1px solid #E8E9EC; padding: 8px 0px 8px 2px;   position: relative; text-align: left;
                span.other-num-arr{
                    width: 20px; height: 20px; display: inline-block; font-size: 8px; line-height: 20px;margin-right: 2px; margin-bottom: 2px; text-align: center;
                }
                span.other-num-err{
                    height: 20px; display: inline-block; font-size: 8px; line-height: 20px;margin-right: 2px; margin-bottom: 2px;text-align: center;
                }
                &.num-word span{
                   
                }
                .rate-lhc-qlc-lot-1,.rate-lhc-qlc-lot-2,.rate-lhc-qlc-lot-7,.rate-lhc-qlc-lot-8,.rate-lhc-qlc-lot-01,.rate-lhc-qlc-lot-02,.rate-lhc-qlc-lot-07,.rate-lhc-qlc-lot-08,.rate-lhc-qlc-lot-12,.rate-lhc-qlc-lot-13,.rate-lhc-qlc-lot-18,.rate-lhc-qlc-lot-19,.rate-lhc-qlc-lot-23,.rate-lhc-qlc-lot-24,.rate-lhc-qlc-lot-29,.rate-lhc-qlc-lot-30,.rate-lhc-qlc-lot-34,.rate-lhc-qlc-lot-35,.rate-lhc-qlc-lot-40,.rate-lhc-qlc-lot-45,.rate-lhc-qlc-lot-46{
                    color: #ff4040 !important; background: #fff;   border-radius: 20px;-moz-box-shadow:0px 0px 3px #333333; -webkit-box-shadow:0px 0px 3px #333333; box-shadow:0px 0px 3px #333333; 
                }
                .rate-lhc-qlc-lot-3,.rate-lhc-qlc-lot-4,.rate-lhc-qlc-lot-9,.rate-lhc-qlc-lot-03,.rate-lhc-qlc-lot-04,.rate-lhc-qlc-lot-09,.rate-lhc-qlc-lot-10,.rate-lhc-qlc-lot-14,.rate-lhc-qlc-lot-15,.rate-lhc-qlc-lot-20,.rate-lhc-qlc-lot-25,.rate-lhc-qlc-lot-26,.rate-lhc-qlc-lot-31,.rate-lhc-qlc-lot-36,.rate-lhc-qlc-lot-37,.rate-lhc-qlc-lot-41,.rate-lhc-qlc-lot-42,.rate-lhc-qlc-lot-47,.rate-lhc-qlc-lot-48{
                    color: #0a92e0 !important; background: #fff; border-radius: 20px;-moz-box-shadow:0px 0px 3px #333333; -webkit-box-shadow:0px 0px 3px #333333; box-shadow:0px 0px 3px #333333; 
                }
                .rate-lhc-qlc-lot-5,.rate-lhc-qlc-lot-6,.rate-lhc-qlc-lot-05,.rate-lhc-qlc-lot-06,.rate-lhc-qlc-lot-11,.rate-lhc-qlc-lot-16,.rate-lhc-qlc-lot-17,.rate-lhc-qlc-lot-21,.rate-lhc-qlc-lot-22,.rate-lhc-qlc-lot-27,.rate-lhc-qlc-lot-28,.rate-lhc-qlc-lot-32,.rate-lhc-qlc-lot-33,.rate-lhc-qlc-lot-38,.rate-lhc-qlc-lot-39,.rate-lhc-qlc-lot-43,.rate-lhc-qlc-lot-44,.rate-lhc-qlc-lot-49{
                    color: #49ac08 !important; background: #fff; border-radius: 20px;-moz-box-shadow:0px 0px 3px #333333; -webkit-box-shadow:0px 0px 3px #333333; box-shadow:0px 0px 3px #333333; 
                }
            }
            .num-circlenum{
                .other-num-arr{
                    border-radius: 20px;-moz-box-shadow:0px 0px 3px #333333; -webkit-box-shadow:0px 0px 3px #333333; box-shadow:0px 0px 3px #333333; 
                }
            } 
        }
        
    }
}
.fontSize12{
    font-size: 12px !important;
}
// 快速的投资
.fast-footer{
    height: 80px;contain: none !important; overflow: visible; position: relative;  z-index: 0;-moz-box-shadow:0px -1px 4px #b1b1b1; -webkit-box-shadow:0px -1px 4px #b1b1b1; box-shadow:0px -1px 4px #b1b1b1; background: #fff; padding: 0 5px;
    .fast-bet-msg{
        height: 10px;  position: absolute; width: 100%; text-align: center; top: -12px; display: flex; justify-content: center;
        .fast-bet-msg-span{
            background: #a6a6a6; height: 20px; line-height: 12px; font-size: 8px; color: #fff; border-radius: 20px; padding: 2px 4px;
        }
    }
    .fast-bet-money{
         position: relative; padding: 10px 0px 5px;  display: flex;
        span{
            display: inline-block; width: 3rem; text-align: center; border:1px solid #ef4c4c; margin-right: 4px; font-size: 12px; height: 30px; border-radius: 30px; color: #ef4c4c; line-height: 30px;
            &:last-child{
                border: none;  color: #d92323; 
            }
        }
    }
    .fast-bet-operating{
        height: 32px; display: flex; align-items: center;
        .fast-bet-input-text{
            width: 140px;border: 1px solid #666;border-radius: 30px; height: 30px; padding: 0 6px; --padding-start:6px; --padding-bottom: 0px;--padding-top: 0px; --padding-end:6px; --color:#333; color: #333;
        }
        .fast-checkbox{
            font-size: 14px; width: 5rem; position: relative; margin-left: 4px;
            input{
                height: 20px; width: 20px; margin-top: 5px; margin-right: 4px;
            }
            span{
                position: absolute; top: 4px;
            }
        }
        .fast-btn{
            font-size: 14px; position: absolute; right: 5px;
            span{
                height: 30px; line-height: 30px;
            }
            span:first-child{
                color: #2f5eac; margin-right: 10px;
            }
            span:last-child{
                width: 80px;  color: #fff; display: inline-block; height:30px; border-radius: 30px; text-align: center;
                background: -webkit-linear-gradient(left, #ff7a7c,#f73e88);background: -o-linear-gradient(right, #ff7a7c,#f73e88); background: -moz-linear-gradient(right, #ff7a7c,#f73e88); background: linear-gradient(to right, #ff7a7c,#f73e88); 
            }   

        }
    }
}
//弹出的页面
.mark-contain{
    position: absolute; top: 0px; left: 0px; right: 0px; z-index: 10000; background: rgba(0,0,0,0.5); width: 100%; height: 100%;
    .m-contain-div{
        height: 410px;width: 290px;background: #fff;border-radius: 10px;position: absolute;left: 50%;margin-left: -145px;top: 50%;margin-top: -205px; padding-top: 40px;padding-bottom: 90px;
        .m-contain-div-header{
            height: 40px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0px; width: 100%; border-bottom: 1px solid #E8E9EC; font-size: 17px; color: #fff;background: -webkit-linear-gradient(left, #ff7a7c,#f73e88);background: -o-linear-gradient(right, #ff7a7c,#f73e88); background: -moz-linear-gradient(right, #ff7a7c,#f73e88); background: linear-gradient(to right, #ff7a7c,#f73e88); border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            span{
                position: absolute; left: 4px; top: 10px; font-size: 12px;
            }
            .m-header-close{
                position: absolute; right: -10px; top: -12px; 
            }
        }
        .m-contain-div-content{
            height: 100%; overflow-x: hidden; overflow-y: auto; padding: 0px 10px;
            .fast-res-grid{
                ion-grid{
                    padding: 0px;
                }
                ion-row{
                    border-bottom: 1px solid #f6f6f6; padding: 4px 0px;
                }
                .fast-res-one-row{
                    border-bottom: 1px solid #5f5f5f; width: 270px; position: fixed; height: 30px; background: #fff; z-index: 10;  color: #858585;
                }
                .fast-res-list-row{
                    padding-top: 30px;
                    ion-col{
                        font-size: 12px;
                    }
                }
                ion-col{
                    padding: 0px; font-size: 14px; display: flex; align-items: center;
                    &.fast-res-grid-left{
                       justify-content: start;
                    }
                    &.fast-res-grid-c{
                        justify-content: center;
                    }
                    &.fast-res-grid-right{
                        justify-content: flex-end;
                    }
                }
            }
            .fast-set-money{
                .m-contain-div-input-d{
                    height: 55px;  border-bottom: 1px solid #E8E9EC; padding: 0 65px; display: flex; align-items: center;
                }
                ion-input{
                   height: 36px;border-radius: 36px; border: 2px solid #E8E9EC;--padding-start: 10px; padding-left: 10px; width: 120px; text-align: center; --color:gray;color: gray;
                }
            }
        }
        .m-contain-div-footer{
             height: 90px; position: absolute; bottom: 0px;width: 100%;font-size: 17px;
             .m-contain-div-footer-h{
                height: 30px;
                .fast-res-bottom{
                    margin: 0 10px; padding: 0px; border-bottom: 1px solid #5f5f5f; border-top: 1px solid #5f5f5f; height: 30px; line-height: 30px; font-weight: 800;
                    ion-col{
                        padding: 0px; font-size: 14px; display: flex; align-items: center;
                        &.fast-res-grid-left{
                           justify-content: start;
                        }
                        &.fast-res-grid-c{
                            justify-content: center;
                        }
                        &.fast-res-grid-right{
                            justify-content: flex-end;
                        }
                    }
                }
                .fast-set-bottom{
                    ion-col{
                        padding: 0px;
                    }
                }
             }
             .m-contain-div-footer-f{
                height: 60px; display: flex; justify-content: center; align-items: center;
                ion-button{
                    height: 40px; width: 90%; background: -webkit-linear-gradient(left, #ff7a7c,#f73e88);background: -o-linear-gradient(right, #ff7a7c,#f73e88); background: -moz-linear-gradient(right, #ff7a7c,#f73e88); background: linear-gradient(to right, #ff7a7c,#f73e88);
                    --background: -webkit-linear-gradient(left, #ff7a7c,#f73e88);--background: -o-linear-gradient(right, #ff7a7c,#f73e88); --background: -moz-linear-gradient(right, #ff7a7c,#f73e88); --background: linear-gradient(to right, #ff7a7c,#f73e88);border-radius: 40px;
                }
             }
        }
    }
}
.hide-tab{
    display: none;
}
.show-tab{
    display: block;
}

.res-item-more{
    background: #fff; overflow: auto; max-height: 250px; 
    i{ font-style: normal; }
    .grid-header{
        padding: 0px;  position: fixed; background: #fff; width: 100%; z-index: 3;
        ion-row{
            height: 1.8rem; border-bottom: 1px solid #E8E9EC;
            ion-col{
                font-size: 0.7rem; line-height: 1.8rem; padding: 0px; text-align: center; 
                span{
                    color: #666; padding: 4px; margin-right: 2px; border: 1px solid #999; border-radius: 3px;
                    &.active{
                        background: #ff6565;    font-family: 'impact';color: #fff;
                    }
                }
            }
        }
        .lotter-data{
            border-left: 1px solid #E8E9EC;
        }
        .lotter-date{
            font-weight: bolder; color: #777;
        }
    }
    .lottery-content{
        padding-top: 35px;
        .view-more-btn{
            font-size: 14px;text-align: center; padding: 10px;
            span{
                background: #ff6565 ;  padding: 4px; border-radius: 3px; color: #fff; border:1px solid #999;
            }
        }
        &.lottery-pk8,&.lottery-pt8,&.lottery-pks,&.lottery-pkt,&.lottery-sg8{
            .lottery-res-contain{
                span{
                    &.lottery-sx-dd{//大小单双
                        width: 1.1rem; height: 1.1rem; border-radius: 3px;  font-size: 0.7rem; font-weight: bold;
                    }
                }
            }
        }
    }
    
}

.res-item-more .lottery-content{
    ion-grid{
        padding: 0px;
        ion-col{
            padding: 0px; text-align: center; font-size: 0.6rem; min-height: 30px; 
            &.lotter-data{
                display: flex; justify-content: center; align-items: center; min-height: 30px;
                &.lotter-data-right{
                    border-left: 1px solid #E8E9EC;
                }
            }
        }
        ion-row{
            align-items: center; border-bottom: 1px solid #E8E9EC;
        }
        &.res-nn{
            ion-row{
                display: flex; align-items: center;
            }
        }
    }
    .lottery-res-contain{
        line-height: 1.5rem; 
        &.lottery-res-contain-sum,&.lottery-res-contain-tm{
            display: flex; justify-content: center; align-items: center;
            .lottery-ts-sx-dd{
                padding: 0.3rem;line-height: 0.65rem; height: 1.28rem; border-radius: 3px;  font-size: 0.7rem; font-weight: bold;
                &.lottery-tslong-sx-dd{
                    padding: 0.3rem 0.1rem; 
                }
                &.lottery-tslong-single-sx-dd{
                    padding: 0.3rem 0rem; width:1.275rem ; 
                }
                &.lottery-tslong-single-sx-dd-one{
                    padding: 0.3rem 0rem;width:1.275rem ;
                }
                &.lottery-tslong-single-sx-dd-two{
                    padding: 0.3rem 0rem;width:1.275rem ; 
                }
            }
        }
        span{
            display: inline-block; height: 1.1rem; line-height: 1.1rem; margin-right: 0.2rem; 
            &.lot-0,&.lot-1,&.lot-2,&.lot-3,&.lot-4,&.lot-5,&.lot-6,&.lot-7,&.lot-8,&.lot-9{
               margin-right: 0.05rem;
            }
           &.dxds-red{
               color: #ff6565;
           }
           &.lhc-qlc-sum-num{//六合的总和样式
               display: inline-block;border-radius: 1rem; height: 1.2rem; width: 2.7rem; padding: 0px;text-align: center;line-height: 1.1rem; font-weight: bold;
               &.lhc-qlc-num{//只有数字
                   color: #e64f4f; text-align: right; padding-right: 0.5rem; width: 2.2rem;
               }
           }
           &.lottery-sx-dd{//大小单双
               width: 1.2rem; height: 1.2rem; border-radius: 3px; font-weight: bold;
           }
           &.lhc-qlc-sum-dd,&.lottery-dd{
               color: #fff; background: #8273b0;
           }
           &.lhc-qlc-sum-sx,&.lottery-sx{
               color: #fff; background: #67bf7f;
           }
           &.lhc-qlc-sum-red{
            color: #fff; background: #ff4040;  width: 1.2rem;border-radius: 3px;
           }
            &.lhc-qlc-sum-green{
                color: #fff; background: #49ac08;width: 1.2rem;border-radius: 3px;
            }
            &.lhc-qlc-sum-blue{
                color: #fff; background: #0a92e0;width: 1.2rem;border-radius: 3px;
           }
           &.lotter-sum-wei-d{
               color: #65b259;background: #fff;
           }
           &.lotter-sum-wei-x{
               background-color: #fff;color: #5385ba;
           }
           &.lotter-sum-dui{
            background-color: #fff;color: #56ac8b;
           }
           &.lotter-sum-za{
             background-color: #fff;color: #818181;
           }
           &.lotter-sum-sz{
            background-color: #fff;color: #2fa8e9;
           }
           &.lotter-sum-bsz{
            background-color: #fff;color: #7f75b5;
           }
           &.lotter-sum-bao{
            background-color: #fff;color: #ea3531;
           }
           &.lot-tshe{
               padding: 0.3rem 0.4rem !important;
           }
       }
        &.balls-contain{
            span{
                border-radius: 3px; color: #fff; width: 1.1rem;
                &.pk-num-font{
                    font-family: 'impact'; -webkit-text-stroke: 1px #333; text-stroke: 1px #333; font-size: 0.8rem; margin-right: 0.2rem;
                }
                &.lot-pk-sum{
                    color: #333; width: 1.2rem; height:1.2rem; border-radius: 3px; border: 1px solid #777; text-align: center;
                }
                &.dxds-red{
                    color: #ff6565 !important;
                }
                &.lot-sxg{
                    color: #fff; background: url('../../../../assets/img/lot_res_bg.png') no-repeat; background-size: contain;
                }
                &.lot-js8-a20{
                    border-radius: 50% !important; background: linear-gradient(122deg, #e8e8e8 2%, #fefefe 77%, #fefefe 100%);border: 1px solid #c1c3ce; color: #1051e5;
                    &.lot-js8-a20-1,&.lot-js8-a20-2,&.lot-js8-a20-3,&.lot-js8-a20-4,&.lot-js8-a20-5,&.lot-js8-a20-6,&.lot-js8-a20-7,&.lot-js8-a20-8,&.lot-js8-a20-9,&.lot-js8-a20-10,&.lot-js8-a20-11,&.lot-js8-a20-12,
                    &.lot-js8-a20-13,&.lot-js8-a20-14,&.lot-js8-a20-15,&.lot-js8-a20-16,&.lot-js8-a20-17,&.lot-js8-a20-18,&.lot-js8-a20-19,&.lot-js8-a20-20,&.lot-js8-a20-21,&.lot-js8-a20-22,&.lot-js8-a20-23,&.lot-js8-a20-24,&.lot-js8-a20-25,
                    &.lot-js8-a20-26,&.lot-js8-a20-27,&.lot-js8-a20-28,&.lot-js8-a20-29,&.lot-js8-a20-30,&.lot-js8-a20-31,&.lot-js8-a20-32,&.lot-js8-a20-33,&.lot-js8-a20-34,&.lot-js8-a20-35,&.lot-js8-a20-36,&.lot-js8-a20-37,&.lot-js8-a20-38,&.lot-js8-a20-39,&.lot-js8-a20-40{
                       color: #546168 !important;
                    }
                }
            }
            &.small-ball{
                span{
                    width: 1.1rem;
                }
            }
        }
        &.lhc-qlc{
            display:block !important;
        }
         //有和
        .lottery-ts-sx-dd-he{
            background: #d7d7d7; color: #fff; 
        }
        .he-3 .lottery-ts-sx-dd-he{
            padding: 0.3rem 0.455rem !important;
        }
        //sum类别有纯数字
        .ts-number{
            color: #e64f4f; width: 2.5rem !important;
        }
        //江苏快三总和独有的通吃
        .ts-tc{
            padding: 0.3rem 0.2rem !important; border: 1px solid #7f7f7f; font-size: 0.4rem !important; font-weight: 100 !important;
        }
        //澳洲幸运20|极速快乐8
        &.js8-a20-bsl{
            span{
                width: 2.6rem;
                border-radius: 3px;
                color:#fff;
                font-weight: bold;
                &.qdd{
                    background: #8273b0;
                }
                &.qdh{
                    background: #d7d7d7;
                }
                &.shd{
                    background: #67bf7f;
                }
                &.jin{
                    color: #ffc000;
                }
                &.mu{
                    color: #c55a11;
                }
                &.shui{
                    color: #0070c0;
                }
                &.huo{
                    color: #ff0000;
                }
                &.tu{
                    color: #843c0c;
                }
                &:last-child{
                    width: 1.1rem;
                }
            }
        }
    }
    .lottery-res-tm-contain{
        display: flex; align-items: center;
    }
    .lottery-res-nn-contain{
        padding-top: 0.25rem;
        span{
            display: inline-block; line-height: 1rem; width: 1.6rem;
        }
    }
    // 六合彩，极速六合
.lhc-qlc{
    i{
       font-style: normal;
    }
    span.lhc-qlc-lot-default{
        color: inherit !important;
    }
    span.lhc-qlc-lot{
        line-height: 1.1rem !important; border-radius: 1.1rem !important; width: 1.1rem;
    }
}
.lhc-qlc-lot-1,.lhc-qlc-lot-2,.lhc-qlc-lot-7,.lhc-qlc-lot-8,.lhc-qlc-lot-01,.lhc-qlc-lot-02,.lhc-qlc-lot-07,.lhc-qlc-lot-08,.lhc-qlc-lot-12,.lhc-qlc-lot-13,.lhc-qlc-lot-18,.lhc-qlc-lot-19,.lhc-qlc-lot-23,.lhc-qlc-lot-24,.lhc-qlc-lot-29,.lhc-qlc-lot-30,.lhc-qlc-lot-34,.lhc-qlc-lot-35,.lhc-qlc-lot-40,.lhc-qlc-lot-45,.lhc-qlc-lot-46{
    background: #ff4040 !important; color: #fff !important;
}
.lhc-qlc-lot-3,.lhc-qlc-lot-4,.lhc-qlc-lot-9,.lhc-qlc-lot-03,.lhc-qlc-lot-04,.lhc-qlc-lot-09,.lhc-qlc-lot-10,.lhc-qlc-lot-14,.lhc-qlc-lot-15,.lhc-qlc-lot-20,.lhc-qlc-lot-25,.lhc-qlc-lot-26,.lhc-qlc-lot-31,.lhc-qlc-lot-36,.lhc-qlc-lot-37,.lhc-qlc-lot-41,.lhc-qlc-lot-42,.lhc-qlc-lot-47,.lhc-qlc-lot-48{
    background: #0a92e0 !important; color: #fff !important;
}
.lhc-qlc-lot-5,.lhc-qlc-lot-6,.lhc-qlc-lot-05,.lhc-qlc-lot-06,.lhc-qlc-lot-11,.lhc-qlc-lot-16,.lhc-qlc-lot-17,.lhc-qlc-lot-21,.lhc-qlc-lot-22,.lhc-qlc-lot-27,.lhc-qlc-lot-28,.lhc-qlc-lot-32,.lhc-qlc-lot-33,.lhc-qlc-lot-38,.lhc-qlc-lot-39,.lhc-qlc-lot-43,.lhc-qlc-lot-44,.lhc-qlc-lot-49{
    background: #49ac08 !important; color: #fff !important;
}

.ssc-ssc{
    display: flex; align-items: center;
    span.ssc-ssc-num{
        height: 1.3rem !important; width: 1.3rem !important; 
    }
    span.ssc-ssc--00,span.ssc-ssc--0{
        background: url('../../../../assets/img/sx_0.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--01,span.ssc-ssc--1{
        background: url('../../../../assets/img/sx_1.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--02,span.ssc-ssc--2{
        background: url('../../../../assets/img/sx_2.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--03,span.ssc-ssc--3{
        background: url('../../../../assets/img/sx_3.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--04,span.ssc-ssc--4{
        background: url('../../../../assets/img/sx_4.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--05,span.ssc-ssc--5{
        background: url('../../../../assets/img/sx_5.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--06,span.ssc-ssc--6{
        background: url('../../../../assets/img/sx_6.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--07,span.ssc-ssc--7{
        background: url('../../../../assets/img/sx_7.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--08,span.ssc-ssc--8{
        background: url('../../../../assets/img/sx_8.png') no-repeat; background-size: contain; 
    }
    span.ssc-ssc--09,span.ssc-ssc--9{
        background: url('../../../../assets/img/sx_9.png') no-repeat; background-size: contain; 
    }
}

.ssn-ssh-f3d-pl3-sjs{
    span.ssn-ssh-f3d-pl3-sjs-num{
        height: 1.2rem !important; width: 1.2rem !important; line-height: 1.2rem !important; background: url('../../../../assets/img/lot_res_bg.png') no-repeat; background-size: contain;
    }
}

.s3s-s3s{
    display: flex;
    span.s3s-s3s--01,span.s3s-s3s--1{
        background: url('../../../../assets/img/sai01.png') no-repeat; background-size: contain; 
    }
    span.s3s-s3s--02,span.s3s-s3s--2{
        background: url('../../../../assets/img/sai02.png') no-repeat; background-size: contain; 
    }
    span.s3s-s3s--03,span.s3s-s3s--3{
        background: url('../../../../assets/img/sai03.png') no-repeat; background-size: contain; 
    }
    span.s3s-s3s--04,span.s3s-s3s--4{
        background: url('../../../../assets/img/sai04.png') no-repeat; background-size: contain; 
    }
    span.s3s-s3s--05,span.s3s-s3s--5{
        background: url('../../../../assets/img/sai05.png') no-repeat; background-size: contain; 
    }
    span.s3s-s3s--06,span.s3s-s3s--6{
        background: url('../../../../assets/img/sai06.png') no-repeat; background-size: contain; 
    }
}
.stj-ssg{
    span.stj-ssg-num{
        height: 1.2rem !important; width: 1.2rem !important; line-height: 1.14rem !important; border-radius: 1.2rem !important;
    }
    .stj_ssg--01,.stj_ssg--02,.stj_ssg--03,.stj_ssg--04,.stj_ssg--05,.stj_ssg--06,.stj_ssg--07,.stj_ssg--08,.stj_ssg--09,.stj_ssg--1,.stj_ssg--2,
            .stj_ssg--3,.stj_ssg--4,.stj_ssg--5,.stj_ssg--6,.stj_ssg--7,.stj_ssg--8,.stj_ssg--9,.stj_ssg--10,.stj_ssg--11,.stj_ssg--12,.stj_ssg--13,.stj_ssg--14,
            .stj_ssg--15,.stj_ssg--16,.stj_ssg--17,.stj_ssg--18{
                background-image: linear-gradient(to bottom,#ffffff, #eaeaea); color: #003333 !important; border: 1px solid #c1c3ce;
            }
            .stj_ssg--19,.stj_ssg--20{
                background: #ff6161 !important; border: 1px solid #ff6161;
            }
}

.sgx-sgx{
    .sgx-sgx-num{
        width: 1.2rem !important; height: 1.2rem !important; line-height: 1.2rem !important; display: inline-block !important; border-radius: 1.2rem !important; color: #fff !important;
     }
    .sgx_sgx--01,.sgx_sgx--04,.sgx_sgx--07,.sgx_sgx--1,.sgx_sgx--4,.sgx_sgx--7,.sgx_sgx--10,.sgx_sgx--13,.sgx_sgx--16,.sgx_sgx--19 {
        background: #ff4040 !important;
    }
    .sgx_sgx--02,.sgx_sgx--05,.sgx_sgx--08,.sgx_sgx--2,.sgx_sgx--5,.sgx_sgx--8,.sgx_sgx--11,.sgx_sgx--14,.sgx_sgx--17,.sgx_sgx--20 {
        background: #0a92e0 !important;
    }
    .sgx_sgx--03,.sgx_sgx--06,.sgx_sgx--09,.sgx_sgx--3,.sgx_sgx--6,.sgx_sgx--9,.sgx_sgx--12,.sgx_sgx--15,.sgx_sgx--18,.sgx_sgx--21 {
        background: #49ac08 !important;
    }
}
    
}

// 顶部的下拉菜单的处理
.down-menu-mark{
    position: absolute; background: rgba(0,0,0,0.5); width: 100%; height: 100%; z-index: 1000;  top: 44px; display: none;
  }
  .down-menu-contain{
     padding: 2px; height: 270px; overflow-y: auto; background: #fff; border-radius: 10px;margin: 10px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    p{
      margin: 0px; padding: 0px;
    }
    .d-m-c{
      display: flex; border-bottom: 1px solid #E8E9EC;
      .d-m-c-title{
        flex: 2; color: #ff6565; font-size: 16px; height: 50px; display: flex; flex-direction: column; align-items: center; padding-top: 6px;
        .iconfont{
            font-size: 22px;
        }
      }
      .d-m-c-son{
        flex: 5; display: flex; flex-wrap:wrap;
        div{
           width: 33%;  height:55px; display: flex;  flex-direction: column; justify-content: center;
          p{
            text-align: center; font-size: 12px; color: #000000;
            &.d--m-c-son-time{
              font-size: 10px; color: #749ad3; height: 16px; margin-top: 5px;
              &.red{
                  color: #ff6565;
              }
            }
          }
        }
      }
    }
  }

//长龙的显示数据
  .cl-contain{
    .period-item{
        display: flex;
        flex-direction: column;
        border-radius: 10px;
        border: 1px solid #E8E9EC;
        padding: 5px 10px 10px;
        margin-bottom: 10px;
        font-size: 12px;
        position: relative;
        .period-item-mark{
            position: absolute;
            background: rgba(0,0,0,0.5);
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            border-radius: 10px;
            z-index: 10;
            display: none;
            &.close{
                display: inherit;
            }
            p{
                width: 100%;
                line-height: 100px;
                font-size: 18px;
                color: #fff;
                text-align: center;
                font-weight: 600;
            }
        }
        .period-item-header{
            height: 20px;
            border-bottom: 1px solid #E8E9EC;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 5px;
        }
        .period-item-content{
            display: flex;
            flex-direction: row;
            align-items: center;
            padding-bottom: 5px;
            .period-item-content-t{
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: flex-end;
            }
            span.period-item-content-target{
                display: flex;
                flex-direction: column;
                border: 1px solid #E8E9EC;
                height: 44px;
                padding: 4px;
                margin-right: 4px;
                margin-top: 4px;
                &.select{
                    background:#ff6565;
                    color: #FFF;
                }
            }
        }
        .period-item-progress{
            height: 17px;
            position: relative;
            .progress-component{
                position: relative;
                height: 20px;
                .progress-buffer-bar{
                    position: absolute;
                    width: 100%;
                    z-index: 1;
                    background: #548fed;
                    height: 4px;
                    top: 10px;
                }
                .progress{
                    position: absolute;
                    width: 100%;
                    z-index: 2;
                    background: #ff6565;
                    height: 4px;
                    top: 10px;
                }
                .progress-left-value{
                    position: absolute;
                    width: 100%;
                    text-align: left;
                }
                .progress-text{
                    position: absolute;
                    z-index: 3;
                    text-align: right;
                }
                .progress-right-value{
                    position: absolute;
                    width: 100%;
                    text-align: right;
                }
            }
        }
        .period-item-footer{
            height: 30px;
            line-height: 30px;
            text-align: left;
            padding-top: 4px;
        }
    }
  }



